<template>
    <div>
      <div>

        <el-button round @click="$router.push('/articleFavority')">我的文章收藏夹</el-button>
        <el-button round @click="$router.push('/articleCart')">我的文章购物车</el-button>
        <el-button round @click="$router.push('/articleOrder')">我的文章订单</el-button>

      </div>
      <div>
        <el-col :span="4" v-for="item in items" :key="item.index">
          <div class="grid-content bg-purple">
          <div >
            <div><a href="javascript:void(0)"><el-image
              @click="findArticleById(item.id)"
              style="width: 200px; height: 200px"
              :src="item.pic"
              fit="fit"></el-image></a></div>
            <div style="width: 200px;">
              <el-link type="success" @click="findArticleById(item.id)" style="font-size: 15px;" class="outer">{{item.articleName}}</el-link>
            </div>
          </div>
        </div>
        </el-col>
      </div>
      <div class="block">
        <el-col :span="24" >
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="12"
          layout="prev, pager, next, jumper"
          :total="count">
        </el-pagination>
        </el-col>
      </div>


    </div>
</template>

<script>
    import axios from 'axios';

    export default {
        name: "article1",
        data(){
          return{
            items:[],
            currentPage:1,
            count:null,
          }
        },
      methods:{
          findAll(){
            axios.post("http://localhost:8088/article/findAll?page="+this.currentPage+"&size=12").then(res=>{
              if(res.data.code==0){
                this.items=res.data.data;
                this.count=res.data.total;
              }
            })
          },
          findArticleById(id){
            this.$router.push({name:"articleInfo",params:{id:id}});
          },
          handleCurrentChange(val) {
            this.currentPage=val;
            this.findAll();
            console.log(`当前页: ${val}`);
          }
      },
      mounted() {
          this.findAll();
      }
    }
</script>

<style scoped>

</style>
<style>
  .outer{
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
    width: 200px;
  }
</style>
